{extend name="base"/}
{block name="resources"}
{/block}
{block name="main"}
<!-- 搜索框 -->
<div class="ns-screen layui-collapse" lay-filter="selection_panel">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">筛选</h2>
		<form class="layui-colla-content layui-form layui-show">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">搜索方式：</label>
					<div class="layui-input-inline">
						<select name="status" lay-filter="status">
							<option value="">搜索类型</option>
<!--							<option value="nickname">昵称</option>-->
							<option value="mobile">手机</option>
						</select>
					</div>
					<div class="layui-inline">
						<input type="text" id="search_text" name="search_text" placeholder="输入手机号" class="layui-input" autocomplete="off">
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">会员类型：</label>
					<div class="layui-input-inline">
						<select name="member_card_type" lay-filter="member_card_type">
							<option value="">全部</option>
							<option value="1">个人会员</option>
							<option value="2">门店会员</option>
							<option value="3">员工会员</option>
						</select>
					</div>

				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">开始-结束时间：</label>
					<div class="layui-input-inline">
						<div class="layui-input-inline">
							<input type="text" class="layui-input ns-len-short" placeholder="开始时间" autocomplete="off" name="start_date" id="start_time" readonly>
						</div>
						<div class="layui-form-mid">-</div>
						<div class="layui-input-inline end-time">
							<input type="text" class="layui-input ns-len-short" placeholder="结束时间" autocomplete="off" name="end_date" id="end_time" readonly>
						</div>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">来源类型：</label>
					<div class="layui-input-inline">
						<select name="from_type">
							<option value="">请选择</option>
							{foreach $from_type_arr as $from_type_arr_k => $from_type_arr_v}
							<option value="{$from_type_arr_k}">{$from_type_arr_v.type_name}</option>
							{/foreach}
						</select>
					</div>
				</div>
			</div>
			
			<input type="hidden" name="balance_type" />
			
			<div class="ns-form-row">
				<button class="layui-btn ns-bg-color" lay-submit lay-filter="search">筛选</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</form>
	</div>
</div>

<div class="layui-tab ns-table-tab" lay-filter="member_account_list_tab">
	<!--<ul class="layui-tab-title">
		<li class="layui-this" lay-id="balance">余额（不可提现）</li>
		<li lay-id="balance_money">余额（可提现）</li>
	</ul>-->
	<div class="layui-tab-content">
		<table id="member_account_list" lay-filter="member_account_list"></table>
	</div>
</div>

<!--会员信息-->
<script type="text/html" id="userInfo">
	<div class='ns-font-box'>
<!--		<p class="layui-elip">昵称：{{d.nickname}}</p>-->
		<p class="layui-elip">手机号：{{d.mobile}}</p>
<!--		<p class="layui-elip">邮箱：{{d.email}}</p>-->
	</div>
</script>
{/block}
{block name="script"}
<script>
	layui.use(['form', 'laydate','element'], function() {
		var table,
			form = layui.form,
			laydate = layui.laydate,
			currentDate = new Date(),
			element = layui.element;
			minDate = "";
		form.render();

		currentDate.setDate(currentDate.getDate() - 7);
		
		//开始时间
		laydate.render({
			elem: '#start_time',
			type: 'datetime'
		});

		//结束时间
		laydate.render({
			elem: '#end_time',
			type: 'datetime'
		});
		
		//监听Tab切换，以改变地址hash值
		element.on('tab(member_account_list_tab)', function () {
			$("input[name='balance_type']").val(this.getAttribute('lay-id'));
			$("button[lay-filter='search']").click()
		});

		/**
		 * 重新渲染结束时间
		 */
		function reRender(){
		    $("#end_time").remove();
		    $(".end-time").html('<input type="text" class="layui-input" placeholder="结束时间" name="end_date" id="end_time" >');
		    laydate.render({
		        elem: '#end_time',
		        type: 'datetime',
		        min: minDate
		    });
		}

		/**
		 * 表格加载
		 */
		table = new Table({
			elem: '#member_account_list',
			url: ns.url("admin/memberaccount/balance"),
			cols: [
				[{
					width: '1%',
					unresize: 'false'
				},/* {
					title: '会员信息',
					width: '25%',
					unresize: 'false',
					templet: '#userInfo'
				},*/ {
					field: 'nickname',
					title: '会员名称',
					width: '10%',
					unresize: 'false'
				},
				{
					field: 'mobile',
					title: '联系电话',
					width: '15%',
					unresize: 'false'
				},{
					field: 'reg-login',
					title: '类型',
					width: '10%',
					unresize: 'false',
					templet: function (data) {
						if(data.member_card_type==1){
							return '个人会员';
						} else if(data.member_card_type==2){
							return '门店会员';
						}  else if(data.member_card_type==3){
							return '员工会员';
						} else {
							return '用户';
						}
					}
				}, {
					field: 'type_name',
					title: '类型',
					width: '15%',
					unresize: 'false'
				}, {
					field: 'account_data',
					title: '金额',
					width: '15%',
					unresize: 'false'
				}, {
					field: 'create_time',
					title: '产生时间',
					width: '15%',
					unresize: 'false',
					templet: function(data) {
						return ns.time_to_date(data.create_time);
					}
				}, {
					field: 'remark',
					title: '备注',
					width: '15%',
					unresize: 'false'
				}]
			]
		});
		
		/**
		 * 搜索功能
		 */
		form.on('submit(search)', function(data) {
			table.reload({
				page: {
					curr: 1
				},
				where: data.field
			});
			return false;
		});
	});
</script>
{/block}